{% extends "base.html" %}
{% import "partial/seven_moor_control.html" as seven_moor_control_macro %}

{% block head %}
{{ super() }}
<!--  引入css-->
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='seven_moor/css/pages.css')}}">
    <style>
        .demand_type_group .active,
        .demand_surr_group .active,
        .demand_color_group .active,
        .demand_malf_group .active{
            background: green!important;
        }
    </style>
{% endblock %}

{% block title %}万屏时代OPC - 呼叫记录{% endblock %}

{% block panel_heading %}
  软电话
{% endblock %}

{% block modal %}

<!--客户基本信息模态框-->
<div class="modal fade" id="customer-modal" tabindex="1" role="dialog" aria-labelledby="detailsModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content clearfix">
    </div>
  </div>
</div>

<!--创建订单类型模态框-->
<div class="modal fade" id="demand-type-modal" tabindex="1" role="dialog" aria-labelledby="detailsModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content clearfix">
    </div>
  </div>
</div>

<!--项目信息模态框-->
<div class="modal fade" id="demand-modal" tabindex="1" role="dialog" aria-labelledby="detailsModalLabel">
  <div class="modal-dialog modal-lg" role="document" style="max-height:90%;overflow:auto;">
    <div class="modal-content clearfix">
    </div>
  </div>
</div>

{#  不创建订单  #}
<div class="modal fade" id="not-create-modal" tabindex="1" role="dialog" aria-labelledby="detailsModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content clearfix">
        <div class="modal-header">
            不创建订单
        </div>
        <div class="modal-body clearfix">
            <div class="col-md-12 form-group">
                <div class=col-md-12>
                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-info active" for="delay_type1">
                            <input type="radio" name="not_create_reason" value="客户无需求" id="not_create_reason1" autocomplete="off" checked>
                            客户无需求
                        </label>
                        <label class="btn btn-info" for="delay_type2">
                            <input type="radio" name="not_create_reason" value="打错了" id="not_create_reason2" autocomplete="off">
                            打错了
                        </label>
                        <label class="btn btn-info" for="delay_type3">
                            <input type="radio" name="not_create_reason" value="单纯询价" id="not_create_reason3" autocomplete="off">
                            单纯询价
                        </label>
                        <label class="btn btn-info" for="delay_type4">
                            <input type="radio" name="not_create_reason" value="自定义" id="not_create_reason4" autocomplete="off">
                            自定义
                        </label>
                    </div>
                    <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
                    <br>
                    <textarea class="form-control" name="not_create_text" id="not_create_text" cols="30" rows="10" style="display: none;"></textarea>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <!-- 上一步与下一步按钮 -->
            <div class="col-md-12 form-group">
                <div class="col-md-6">
                    <button class="btn btn-default btn-block" data-dismiss="modal" aria-label="Close" id="not_create_goto_customer_modal">上一步</button>
                </div>
                <div class="col-md-6">
                    <button class="btn btn-success btn-block" data-dismiss="modal" aria-label="Close" id="not_create_confirm">确定</button>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>

{#  放弃订单  #}
<div class="modal fade" id="abandon-modal" tabindex="1" role="dialog" aria-labelledby="detailsModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content clearfix">
        <div class="modal-header">
            放弃订单
        </div>
        <div class="modal-body clearfix">
            <div class="col-md-12 form-group">
                <div class=col-md-12>
                    <textarea class="form-control" name="abandon_text" id="abandon_text" cols="30" rows="10"></textarea>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <!-- 上一步与下一步按钮 -->
            <div class="col-md-12 form-group">
                <div class="col-md-6">
                    <button class="btn btn-default btn-block" data-dismiss="modal" aria-label="Close" id="abandon_goto_customer_modal">上一步</button>
                </div>
                <div class="col-md-6">
                    <button class="btn btn-success btn-block" data-dismiss="modal" aria-label="Close" id="abandon_confirm">确定</button>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>

<div class="modal fade" id="delay-handle-modal" tabindex="1" role="dialog" aria-labelledby="detailsModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content clearfix">
        <div class="modal-header">
            延后处理
        </div>
        <div class="modal-body clearfix">
            <div class="col-md-12 form-group">
                <div class=col-md-12>
                    <label>处理时间</label>
                    <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-info active" for="delay_type1">
                            <input type="radio" name="delay_type" value="1" id="delay_type1" autocomplete="off" checked>
                            30分钟后
                        </label>
                        <label class="btn btn-info" for="delay_type2">
                            <input type="radio" name="delay_type" value="2" id="delay_type2" autocomplete="off">
                            1小时后
                        </label>
                        <label class="btn btn-info" for="delay_type3">
                            <input type="radio" name="delay_type" value="3" id="delay_type3" autocomplete="off">
                            1天后
                        </label>
                        <label class="btn btn-info" for="delay_type4">
                            <input type="radio" name="delay_type" value="4" id="delay_type4" autocomplete="off">
                            自定义
                        </label>
                    </div>
                    <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
                    <br>
                    <input class="form-control" id="delay_date" name="delay_date" type="datetime" style="display: none;">
                </div>
            </div>
            <div class="col-md-12 form-group">
                <div class=col-md-12>
                    <label>延后理由</label>
                    <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
                    <textarea class="form-control" id="delay_reason"></textarea>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <!-- 上一步与下一步按钮 -->
            <div class="col-md-12 form-group">
                <div class="col-md-6">
                    <button class="btn btn-default btn-block" data-dismiss="modal" aria-label="Close" id="delay_handle_goto_customer_modal">上一步</button>
                </div>
                <div class="col-md-6">
                    <button class="btn btn-success btn-block" data-dismiss="modal" aria-label="Close" id="delay_handle_confirm">确定</button>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>

{% endblock %}

{% block panel_body %}
    {{ seven_moor_control_macro.gen_seven_moor_control() }}
{% endblock %}

{% block extra_page_content %}
<div style="margin-left: 15px; margin-right: 15px;">
    <div class="box box-success box-solid">
        <div class="box-header">
            通话记录
        </div>
        <div class="box-body" id="extra_panel_body">
            <table id="waiting_outbounds" class="table table-bordered table-hover table-condensed table-striped">
                <thead>
                    <tr>
                        <th>客户ID</th>
                        <th>客户电话</th>
                        <th>客户昵称</th>
                        <th>发起方式</th>
                        <th>通话时长</th>
                        <th>拨打时间</th>
                        <th>处理时间</th>
                        <th>接听客服</th>
                        <th>转化结果</th>
                        <th>备注</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="table_body">
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
    var user_intro = new Object();
    var demand_info = new Object();

    var get_records_interval = 5;
    getRecords();
    // 每隔5秒刷新
    window.setInterval(getRecords, 1000*get_records_interval);
    // 取当天的呼叫记录
    function getRecords() {
        $.ajax({
            url: "{{ url_for('sever_moor_bp.ajax_get_record_list') }}",
            cache: false
        }).done(function(data){
            $("#table_body").empty();
            for (var i = 0; i < data.length; i++) {
                var customer_number = data[i]['customer_number'];
                var full_customer_number = data[i]['full_customer_number'];
                var customer_nickname = data[i]['customer_nickname'];
                var call_type = data[i]['call_type'];
                var answer_state = data[i]['answer_state'];
                var call_reason = data[i]['call_reason'];
                var begin_datetime = data[i]['begin_datetime'];
                var handle_time = data[i]['handle_time'];
                var agent_name = data[i]['agent_name'];
                var transform_result = data[i]['transform_result'];
                var user_id = data[i]['user_id'];
                var demand_id = data[i]['demand_id'];
                var extra_info = data[i]['extra_info'];

                if(transform_result === '未处理'){
                    $("#table_body").append(
                        "<tr>" +
                            "<td>" + user_id + "</td>" +
                            "<td><a href='/op/user/" + user_id + "' target='_blank'>" + customer_number + "</a></td>" +
                            "<td>" + customer_nickname + "</td>" +
                            "<td>" + call_type + "</td>" +
                            "<td>" + answer_state + "</td>" +
                            "<td>" + begin_datetime + "</td>" +
                            "<td>" + handle_time + "</td>" +
                            "<td>" + agent_name + "</td>" +
                            "<td>" + transform_result + "</td>" +
                            "<td>" + extra_info + "</td>" +
                            "<td>" +
                            "<a class='btn-group btn btn-success btn-xs handle-btn' style='margin-right:5px;' data-mobile=" + full_customer_number + ">处理</a>" +
{#                            "<a class='btn-group btn btn-primary btn-xs' onclick=phone.dialout(" + customer_number + ")>呼叫</a>" +#}
                            "</td>" +
                        "</tr>"
                    );
                }else {
                    if(demand_id == 0){
                        $("#table_body").append(
                            "<tr>" +
                                "<td>" + user_id + "</td>" +
                                "<td><a href='/op/user/" + user_id + "' target='_blank'>" + customer_number + "</a></td>" +
                                "<td>" + customer_nickname + "</td>" +
                                "<td>" + call_type + "</td>" +
                                "<td>" + answer_state + "</td>" +
                                "<td>" + begin_datetime + "</td>" +
                                "<td>" + handle_time + "</td>" +
                                "<td>" + agent_name + "</td>" +
                                "<td>" + transform_result + "</td>" +
                                "<td>" + extra_info + "</td>" +
                                "<td></td>" +
                            "</tr>"
                        );
                    }else {
                        $("#table_body").append(
                            "<tr>" +
                                "<td>" + user_id + "</td>" +
                                "<td><a href='/op/user/" + user_id + "' target='_blank'>" + customer_number + "</a></td>" +
                                "<td>" + customer_nickname + "</td>" +
                                "<td>" + call_type + "</td>" +
                                "<td>" + answer_state + "</td>" +
                                "<td>" + begin_datetime + "</td>" +
                                "<td>" + handle_time + "</td>" +
                                "<td>" + agent_name + "</td>" +
                                "<td>" + transform_result + "</td>" +
                                "<td>" + extra_info + "</td>" +
                                "<td><a class='btn btn-success btn-xs' href='/op/demand/" + demand_id + "' target='_blank'>项目详情</a></td>" +
                            "</tr>"
                        );
                    }

                }

            }
            $('#table_body .handle-btn').each(function (i, obj){
                $(obj).click(function () {
                    var mobile = $(this).data('mobile');
                    show_customer_modal(mobile);
                });
            });

        }).fail(function (){
            alert("获取呼叫记录失败，请联系系统管理员！")
        });
    }

    // 客户基本信息模态框显示与隐藏触发事件
    $('#customer-modal').on('shown.bs.modal', function (){
        console.log('客户基本信息模态框打开了');
        // 3s延时, 防止自动外呼时客户接通后, 模态框先于话机前弹出把话机置忙, 导致最终无法分配到话机
        window.setInterval(phone.setBusy(true, 1), 3000);
    });

    // $('#customer-modal').on('hidden.bs.modal', function (){
    //     // 同步用户信息至JS全局变量
    //     user_intro.id = $('#userId').val();
    //     user_intro.nickname = $('#userNickname').val();
    //     user_intro.gender = $('input:radio[name="userGender"]:checked').val();

    //     // 提交用户姓名和性别至服务器
    //     $.ajax({
    //         type: "POST",
    //         contentType: "application/json",
    //         url: "{{ url_for('sever_moor_bp.ajax_update_get_user_intro') }}",
    //         data: JSON.stringify(user_intro)
    //     })

    //     // NOTE 设置客服空闲绑定在了 延后处理按钮 上
    // });

    function show_customer_modal(mobile) {
        if (typeof(mobile)=="undefined") {
            mobile = user_intro.mobile;
        } else {
            user_intro.mobile = mobile;
        }
        var modal_id = "#customer-modal";
        $(modal_id).find(".modal-content").eq(0).html("加载中");
        $.ajax({
            url: "{{ url_for('sever_moor_bp.ajax_get_user_intro') }}",
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify({'user_mobile': mobile.toString()})
        }).done(function (html){
            $(modal_id).find('.modal-content').eq(0).html(html);
            // 如果拨打的是虚拟号，异步返回的页面中的mobile才是真实号码
            user_intro.mobile = $('#user-full-mobile').val();
            user_intro.id = $('#userId').val();
            $('#create_demand').removeAttr('disabled');
            $('#not_create_demand').removeAttr('disabled');
            $('#wait_for_reject').removeAttr('disabled');
            $('#delay_handle').removeAttr('disabled');
        });

        $(modal_id).modal({backdrop: "static", keyboard: false});
    }

    function show_demand_type_modal() {
        var modal_id = "#demand-type-modal";
        $(modal_id).find(".modal-content").eq(0).html("加载中");
        var userId = $('#userId').val();
        var userNickname;
        if(user_intro.nickname){
            userNickname = user_intro.nickname
        }else{
            userNickname = $('#userNickname').val()
        }
        var cate = 1;
        if(demand_info.cate){
            cate = demand_info.cate
        }

        var userGender = $('input:radio[name="userGender"]:checked').val();
        $.ajax({
            url: "{{ url_for('sever_moor_bp.ajax_get_demand_type') }}",
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify({
                'uid': userId,
                'nickname': userNickname,
                'gender': userGender,
                'cate': cate
            })
        }).done(function (html){
            $(modal_id).find('.modal-content').eq(0).html(html);
            if(demand_info.mobile){
                $('#mobile').val(demand_info.mobile)
            }
            if(demand_info.gender){
                $('#gender').val(demand_info.gender)
            }
            if(demand_info.prov){
                $('#prov').val(demand_info.prov);
                get_city_choices()
            }
            if(demand_info.city){
                $('#city').val(demand_info.city)
            }
            if(demand_info.addr){
                $('#addr').val(demand_info.addr)
            }
        });

        $(modal_id).modal({backdrop: "static", keyboard: false});
    }

    function show_demand_modal() {
        // 同步信息至 demand_info 对象
        user_intro.nickname = $('#nickname').val();
        demand_info.uid = $('#uid').val();
        demand_info.draft_demand_id = $('#draft_demand_id').val();
        demand_info.mobile = $('#mobile').val();
        demand_info.nickname = $('#nickname').val();
        demand_info.gender = $('#gender').val();
        demand_info.prov = $('#prov').val();
        demand_info.city = $('#city').val();
        demand_info.addr = $('#addr').val();
        demand_info.cate = $('input:radio[name="cate"]:checked').val();

        var modal_id = "#demand-modal";
        $(modal_id).find(".modal-content").eq(0).html("加载中");
        $.ajax({
            url: "{{ url_for('sever_moor_bp.ajax_create_demand') }}",
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify({
                'uid': demand_info.uid,
                'draft_demand_id': demand_info.draft_demand_id,
                'nickname': demand_info.nickname,
                'cate': demand_info.cate
            })
        }).done(function (html){
            $(modal_id).find('.modal-content').eq(0).html(html);
            fill_demand_info()
        });

        $(modal_id).modal({backdrop: "static", keyboard: false});
    }

    function sync_demand_info() {
        demand_info.demand_type = $('input:radio[name="demand_type"]:checked').val();
        demand_info.demand_surr = $('input:radio[name="demand_surr"]:checked').val();
        demand_info.demand_color = $('input:radio[name="demand_color"]:checked').val();
        demand_info.demand_malf = $('input:radio[name="demand_malf"]:checked').val();
        demand_info.demand_span = $('#demand_span').val();
        demand_info.demand_size = $('#demand_size').val();
        demand_info.demand_budget = $('#demand_budget').val();
        demand_info.demand_audio = $('input:radio[name="demand_audio"]:checked').val();
        demand_info.demand_audio_sensitive = $('input:radio[name="demand_audio_sensitive"]:checked').val();
        demand_info.demand_remark = $('#demand_remark').val();
        demand_info.demand_admin_remark = $('#demand_admin_remark').val();
        demand_info.demand_audio_sensitive = $('input[name="demand_audio_sensitive"]:checked').val();
    }

    // 提交订单时，设置项目状态为派单中
    function set_demand_status_dispatching() {
        demand_info.demand_status = "9";
    }

    // 发布草稿时，设置项目状态为延时发布
    function set_demand_status_delay() {
        demand_info.demand_status = "6";
    }

    // ajax提交提交订单信息
    function submit_demand_info() {
        $.ajax({
            type: "POST",
            contentType: "application/json",
            url: "{{ url_for('sever_moor_bp.ajax_submit_demand_info') }}",
            data: JSON.stringify(demand_info)
        });
    }

    // 初始化全局变量，当客服放弃订单时触发
    function init_global_variable() {
        user_intro = new Object();
        demand_info = new Object();
    }

</script>
<script type="text/javascript" src="{{url_for('static', filename='seven_moor/js/icallcenter/global.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='seven_moor/hojo/hojo.js')}}" djConfig="isDebug:false, parseOnLoad:false"></script>

<script type="text/javascript">
  hojo.registerModulePath("icallcenter", "{{url_for('static', filename='seven_moor/js/icallcenter')}}");
  hojo.require("icallcenter.logon");
  hojo.require("hojo.io.script");

  hojo.addOnLoad(function () {
      var loginName = "{{ current_user.seven_moor_account }}";
      var password = "{{ current_user.seven_moor_password }}";
      var extenType = "gateway";

      icallcenter.logon.startLogon(loginName, password, extenType);
  });

  hojo.addOnWindowUnload(function (){
    if(phone) {
      phone.destroy(true); // TODO 疑似关闭窗口后签出？
    }
  });
</script>
{% endblock %}
